<!DOCTYPE html>
<html>
<#assign contextPath = request.contextPath/>
<head>
<meta charset="utf-8" />
<title>在线投票系统</title>
<link href="${contextPath}/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript"
	src="${contextPath}/js/jquery-3.0.0.min.js"></script>
<script src="${contextPath}/js/bootstrapValidator.min.js"></script>
<link href="${contextPath}/css/bootstrapValidator.min.css"
	rel="stylesheet" />
</head>

<body>
	<div class="container" style="width: 520px;">
		<form class="form-horizontal" role="form" id="registerform"
			>
			<h2 class="form-signin-heading">注册</h2>
			<div class="form-group">
				<label for="username" class="col-sm-2 control-label">用户名</label>
				<div class="col-sm-10">
					<input type="text" name="username" class="form-control"
						id="username" placeholder="请输入用户名" required>
				</div>
			</div>
			<div class="form-group">
				<label for="pwd" class="col-sm-2 control-label">密码</label>
				<div class="col-sm-10">
					<input type="password" name="password" class="form-control"
						id="pwd" placeholder="请输入密码" required>
				</div>
			</div>
			<div class="form-group">
				<label for="reppwd" class="col-sm-2 control-label">重复密码</label>
				<div class="col-sm-10">
					<input type="password" class="form-control" id="reppwd"
						name="reppwd" placeholder="请再次输入密码" required>
				</div>
			</div>
			<div class="form-group">
				<label for="email" class="col-sm-2 control-label">Email</label>
				<div class="col-sm-10">
					<input type="email" name="email" class="form-control" id="email"
						placeholder="请输入Email">
				</div>
			</div>
			<div class="form-group">
				<div class="col-sm-offset-2 col-sm-10">
					<button type="submit" class="btn btn-primary">注册</button>
					&nbsp;&nbsp;
					<button type="button" class="btn btn-default"
						onclick="javascript:location.href="login.html"">登陆</button>
				</div>
			</div>
		</form>
	</div>
	<script>
		 $(function () {
		        $("form").bootstrapValidator({
		　　　　　　　　message: "表单验证",
		            　feedbackIcons: {
		                　　　　　　　　valid: "glyphicon glyphicon-ok",
		                　　　　　　　　invalid: "glyphicon glyphicon-remove",
		                　　　　　　　　validating: "glyphicon glyphicon-refresh"
		            　　　　　　　　   },
		            fields: {
		                username: {
		                    message: "用户名验证失败",
		                    validators: {
		                        notEmpty: {
		                            message: "用户名不能为空"
		                        },
		                        stringLength: {
		                            min: 6,
		                            max: 30,
		                            message: "用户名长度必须在6到30之间"
		                        },
		                        threshold :  6 , //有6字符以上才发送ajax请求，（input中输入一个字符，插件会向服务器发送一次，设置限制，6字符以上才开始）
		                        remote:{
		                        	url:"existsuser.action",
		                        	message: "用户已存在",//提示消息
		                        	 delay :  2000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax
		                        	type: "POST"//请求方式
		                        },
		                        regexp: {
		                            regexp: /^[a-zA-Z0-9_\.]+$/,
		                            message: "用户名由数字字母下划线和.组成"
		                        }
		                    }
		                },password: {
		                    message:"密码无效",
		                    validators: {
		                        notEmpty: {
		                            message: "密码不能为空"
		                        },
		                        stringLength: {
		                            min: 6,
		                            max: 30,
		                            message: "长度必须在6到30之间"
		                        },
		                        different: {//不能和用户名相同
		                            field: "username",//需要进行比较的input name值
		                            message: "不能和用户名相同"
		                        }
		                    }
		                },
		                reppwd: {
		                    message: "密码无效",
		                    validators: {
		                        notEmpty: {
		                            message: "密码不能为空"
		                        },
		                        identical: {//相同
		                            field: "password",
		                            message: "两次密码不一致"
		                        }
		                    }
		                },
		                email: {
		                    validators: {
		                        notEmpty: {
		                            message: "邮箱地址不能为空"
		                        }
		                    }
		                }
		            }
		        }).on('success.form.bv', function(e) {//点击提交之后
		            // Prevent form submission
		            e.preventDefault();

		            // Get the form instance
		            var $form = $(e.target);
					
		            // Get the BootstrapValidator instance
		            var bv = $form.data('bootstrapValidator');
					var username = $form.find("#username").val();
					var userpwd = $form.find("#pwd").val();
					var email = $form.find("#email").val();
					var vu = {"vu.username":username,"vu.userpwd":userpwd,"vu.email":email};
		            // Use Ajax to submit form data 提交至form标签中的action，result自定义
		             $.post("${contextPath}/register.action", vu, function(result) {
		            	 alert(result);
		            	 location.href="loginPage.action";
		   			}); 
		    });});
	</script>
</body>
</html>